<template>
	<h3>父组件，实现动态组件</h3>
	<button @click="show=MyLeft">切换MyLeft</button>
	<button  @click="show=MyRight">切换MyRight</button>
	<!-- 组件缓存 -->
	<!-- 4.KeepAlive 常用属性 -->
	<KeepAlive exclude='MyLeft'>
		<component :is='show'></component>
	</KeepAlive>
	
</template>

<script setup>
	import MyLeft from './MyLeft.vue';
	import MyRight from './MyRight.vue';
	import {ref, shallowRef} from 'vue'
	//利用动态组件可以动态切换页面中显示的组件。
	//使用<component>标签可以定义动态组件
	//<component is="要渲染的组件"></component>
	// const num=ref(1)
	const show=shallowRef(MyLeft)
</script>

<style scoped>
</style>